<template>
	<view class="flex flex-direction align-center justify-center">
		<view class="w-80 margin-top-xl">
			<view class="flex align-center padding-tb margin-bottom-lg">
				<view class="" style="max-width: 100rpx;">
					<image src="@/static/logo.png" mode="widthFix"></image>
				</view>
				<view class="padding">
					<view class="text-black text-xl  text-bold">登录体验更多精彩</view>
				</view>
			</view>
			<view class="solid-bottom margin-bottom-xl">
				<input type="text" placeholder="邮箱" :value="email" />
			</view>
			<view class="solid-bottom">
				<input type="password" placeholder="密码" :value="password" />
			</view>
			<view class="text-red text-sm padding-tb">{{error}}</view>
			<view class="w-100 margin-bottom-sm">
				<button class="yx-btn text-df text-white text-bold radius text-center w-100 bg-blue" @click="yxLogin"
					hover-class="yx-btn-hover">邮箱登录
				</button>
			</view>
			<agreement :checked.sync="isAgree" ref="agreement"></agreement>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree: false,
				animation: '', // 动画样式
				email: null,
				password: null,
				error:'请输入正确邮箱'
			}
		},
		methods: {

			checkAgree() {
				if (!this.isAgree) {
					this.$refs.agreement.shake()
					return false
				}
				return true
			},
			yxLogin() {
				if (!this.checkAgree()) return

			}
		}
	}
</script>

<style lang="scss">
</style>
